<style scoped>
  .echarts {
    width: calc(100vw - 320px);
    height: calc(100vh - 40px);
    margin-left: auto;
    margin-right: auto;
  }

  .el-main {
    margin-left: 0;
    padding: 0;
    height: calc(100vh - 40px);
  }

</style>
<template>
  <el-main>
    <div class='echarts' ref='outdoor'></div>
  </el-main>
</template>
<script>
  export default {
    data() {
      return {
        sets:{
          humidityMax:0,
          humidityMin:0,
          humidityUnit:'',
          tempMax:0,
          tempMin:0,
          tempUnit:'',
          dirMax:0,
          dirMin:0,
          dirUnit:'',
          speedMax:0,
          speedMin:0,
          speedUnit:'',
          maxRecord:0
        },
        data: {
          createTimes:[],
          outdoorTemps:[],
          outdoorHumiditys:[],
          outdoorWindSpeeds:[],
          outdoorWindDirs:[]
        },
        option: {
          title: {
            text: '室外环境'
          },
          tooltip: {
            trigger: 'axis'
          },
          legend: {
            data: ['室外温度', '室外湿度', '室外风速','室外风向']
          },
          toolbox: {
            show: true,
            feature: {
              dataZoom: {
                yAxisIndex: 'none'
              },
              dataView: {readOnly: true},
              magicType: {type: ['line', 'bar']},
              restore: {},
              saveAsImage: {}
            }
          },
          xAxis: {
            type: 'category',
            boundaryGap: false,
            data: []
          },
          yAxis: {
            type: 'value',
            axisLabel: {
              formatter: '{value}'
            }
          },
          series: [{
            name: '室外温度',
            type: 'line',
            data: [],
            markLine: {
              data: [
                {name: '温度上限', yAxis: 0},
                {name: '温度下限', yAxis: 0}
              ]
            }
          },
            {
              name: '室外湿度',
              type: 'line',
              data: [],
              markLine: {
                data: [
                  {name: '湿度上限', yAxis: 0},
                  {name: '湿度下限', yAxis: 0}
                ]
              }
            },
            {
              name: '室外风速',
              type: 'line',
              data: [],
              markLine: {
                data: [
                  {name: '风速上限', yAxis: 0},
                  {name: '风速下限', yAxis: 0}
                ]
              }
            },
            {
              name: '室外风向',
              type: 'line',
              data: [],
              markLine: {
                data: [
                  {name: '风向上限', yAxis: 0},
                  {name: '风向下限', yAxis: 0}
                ]
              }
            }
          ]
        }
      }
    },
    mounted() {
      const that = this;
      let temp;
      //获取后台设置的参数
      this.$http.get(that.$url + 'getParameters')
        .then(function (response) {
          temp = response.data;
          that.sets.maxRecord = temp.maxrecord;
          const parametersLen = temp.parameters.length;
          for(let i = 0;i < parametersLen;i++){
            switch(temp.parameters[i].id){
              case 'outdoortemp':
                that.sets.tempMax = temp.parameters[i].max;
                that.sets.tempMin = temp.parameters[i].min;
                that.sets.tempUnit = temp.parameters[i].unit;
                break;
              case 'outdoorhumidity':
                that.sets.humidityMax = temp.parameters[i].max;
                that.sets.humidityMin = temp.parameters[i].min;
                that.sets.humidityUnit = temp.parameters[i].unit;
                break;
              case 'outdoorwinddir':
                that.sets.dirMax = temp.parameters[i].max;
                that.sets.dirMin = temp.parameters[i].min;
                that.sets.dirUnit = temp.parameters[i].unit;
                break;  
              case 'outdoorwindspeed':
                that.sets.speedMax = temp.parameters[i].max;
                that.sets.speedMin = temp.parameters[i].min;
                that.sets.speedUnit = temp.parameters[i].unit;
                break;
            }
          }

          console.log(that.sets);
          //获取数据
	      that.$http.get(that.$url + 'getRecentDayData')
	        .then(function (response) {
	          that.data.createTimes = response.data.createTimes;
	          that.data.outdoorTemps = response.data.outdoorTemps;
	          that.data.outdoorHumiditys = response.data.outdoorHumiditys;
	          that.data.outdoorWindSpeeds = response.data.outdoorWindSpeeds;
            that.data.outdoorWindDirs = response.data.outdoorWindDirs;

	          //设置数据
	          //x轴
		      that.option.xAxis.data.push(...that.data.createTimes.slice(0,that.sets.maxRecord));
		      that.data.createTimes.splice(0,that.sets.maxRecord);
		      //温度
		      that.option.series[0].data.push(...that.data.outdoorTemps.slice(0,that.sets.maxRecord));
		      that.data.outdoorTemps.splice(0,that.sets.maxRecord);
		      that.option.series[0].markLine.data[0].yAxis = that.sets.tempMax;
		      that.option.series[0].markLine.data[1].yAxis = that.sets.tempMin;

          
		      //湿度
		      that.option.series[1].data.push(...that.data.outdoorHumiditys.slice(0,that.sets.maxRecord));
		      that.data.outdoorHumiditys.splice(0,that.sets.maxRecord);
		      that.option.series[1].markLine.data[0].yAxis = that.sets.humidityMax;
		      that.option.series[1].markLine.data[1].yAxis = that.sets.humidityMin;


		      //风速
		      that.option.series[2].data.push(...that.data.outdoorWindSpeeds.slice(0,that.sets.maxRecord));
		      that.data.outdoorWindSpeeds.splice(0,that.sets.maxRecord);
		      that.option.series[2].markLine.data[0].yAxis = that.sets.speedMax;
		      that.option.series[2].markLine.data[1].yAxis = that.sets.speedMin;
          //风向
          that.option.series[3].data.push(...that.data.outdoorWindDirs.slice(0,that.sets.maxRecord));
          that.data.outdoorWindDirs.splice(0,that.sets.maxRecord);
          that.option.series[3].markLine.data[0].yAxis = that.sets.dirMax;
          that.option.series[3].markLine.data[1].yAxis = that.sets.dirMin;

		      let myChart = that.$echarts.init(that.$refs.outdoor);
		      myChart.setOption(that.option);
		      
		      
		      setInterval(function () {
		        if (that.option.xAxis.data.length > that.sets.maxRecord) {
		          that.option.xAxis.data.splice(0, that.option.xAxis.data.length - that.sets.maxRecord);
              for(let i = 0;i<4;i++){
                that.option.series[i].data.splice(0, that.option.series[i].data.length - that.sets.maxRecord);
              }
		        }
		        that.option.xAxis.data.push(that.data.createTimes.shift());
		        that.option.series[0].data.push(that.data.outdoorTemps.shift());
		        that.option.series[1].data.push(that.data.outdoorHumiditys.shift());
		        that.option.series[2].data.push(that.data.outdoorWindSpeeds.shift());
            that.option.series[3].data.push(that.data.outdoorWindDirs.shift());

		        myChart.setOption(that.option);
		      }, 1000);
		      
	        })
	        .catch(function (error) {
	          that.$message({
	            message: '获取数据失败',
	            type: 'error'
	          });
	        });

        })
        .catch(function (error) {
          that.$message({
            message: '获取数据失败',
            type: 'error'
          });
        });


    },
    methods: {
      updataData() {

      }
    }
  }

</script>
